<template>
  <div>
    <change
      v-if="changeImg"
      @cancel="changeImg = false"
      @submit="
        (value) => {
          changeImg = false;
          avatar = value;
        }
      "
    ></change>
    <div class="login" v-else>
      <div class="login-msg">登录</div>
      <div class="avatar" >
        <img :src="avatar" alt=""  @click="avatarClick()"/>
      </div>
      <div class="user-input">
        <label for="name">输入你的名字</label>
        <input type="text" name="name" v-model="name" />
      </div>
      <div class="btn" @click="Login()">登录</div>
    </div>
  </div>
</template>

<script>
import change from "@/components/change.vue";

export default {
  name: "Login",
  data() {
    return {
      changeImg: false,
      avatar: require("@/assets/default.jpg"),
      name: "",
    };
  },
  components: {
    change,
  },
  methods: {
    avatarClick() {
      this.changeImg = true;
    },
    Login() {
      var _this=this
      if (this.name == "") {
        alert("用户名不能为空");
        return;
      }

     sessionStorage.setItem("user", JSON.stringify({
        name: this.name,
        avatar: this.avatar,
      }));
       _this.$router.replace('/chat')
          
        
           
    },
  },
};
</script>

<style scoped>
.login {
  background-color: rgb(245, 245, 245);
  width: 300px;
  height: 400px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.user-input {
  margin: 0 auto;
  margin-top: 10px;
  width: 50%;
  height: 50px;
  text-align: center;
  color: black;
  margin-bottom: 50px;
}
.login-msg {
  margin-left: 5px;
  font-size: 13px;
  color: gray;
}
.avatar {
  text-align: center;
}
.avatar img {
  border: 1px solid rgba(79, 79, 79, 0.3);
  border-radius: 50px;
  width: 100px;
  height: 100px;
}
.avatar img:hover {
  border: 1px solid greenyellow;
}
.btn {
  background-color: rgb(47, 255, 158);
  color: black;
  height: 50px;
  width: 150px;
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
  border-radius: 20px;
}
.btn:hover {
  border: 1px solid rgb(147, 155, 158);
}
</style>